<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<!--<link rel="stylesheet" href="../../css/style.css" />-->
		<link rel="stylesheet" href="../../css/iconfont2.css" />
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			body{background:#1a1a1a;font-size:13px;}
			.mui-content{margin:50px 20px 0;background:#1a1a1a;}
			/*头部样式*/
			.home_top{z-index:100000;height:80px;background-color: #3a3f43;box-shadow:none;display: flex;justify-content: space-between;align-items: center;}
			.home_top .mui-title{align-items:;}
			.home_top .top_left{display: flex;justify-content: flex-start;}
			.home_top .top_left img{border:1px solid #333;border-radius: 3px;}
			.home_top .top_left div{font-size:12px;flex-flow: column;display: flex;margin-left:10px;color:#fff;line-height: 20px;}
			
			.home_top{padding-top:14px;}/*修改的顶部样式*/
			.home_top .mui-title{line-height:40px;margin:0 auto;color:#000;background:-webkit-linear-gradient(top,#fbed21,#fab538);width:30%;height:40px;border-radius:20px;}
			.home_top a.mui-action-back{color:#ccc;}
			
			.order_detail .mui-table-view{background:#333;display: flex;flex-flow:column;padding:10px;}
			.order_detail .mui-table-view:before,.order_detail .mui-table-view:after{height:0;}
			.order_detail .mui-table-view .detail_top{display:flex;justify-content: space-between;border-bottom:1px dashed #505050;}
			.order_detail .mui-table-view .detail_top span{padding:0px 5px;background:#0ff;height:20px;}
			.order_detail .mui-table-view .mui-table-view-cell{display: flex;flex-flow: row;justify-content: space-between;padding:10px 0 0 0;}
			.order_detail .mui-table-view .mui-table-view-cell .mui-media-body{display: flex;flex-flow: column;color:#ccc;}
			.order_detail .mui-table-view .mui-table-view-cell .number_right{display: flex;flex-flow: column ;color:#ccc;align-items: flex-end;}
			.order_detail .mui-table-view .mui-table-view-cell .number_right .transaction_num{font-size:14px;}
			.order_detail .mui-table-view .mui-table-view-cell .number_right .button{background:-webkit-linear-gradient(top,#fbed21,#fab538);border-radius:10px;color:#000;padding:0px 5px;}
			.order_detail .mui-table-view .mui-table-view-cell p{color:#fff;font-size:16px;}
			.orderlist{
				width: 100%;
				height: auto;
				margin-top: 10px;
				background: rgb(51,51,51);
				padding: 10px 0px;
				padding-bottom: 36px;
			}
			.order-s{
				margin-left: 10%;
				padding-left:25px;
				border-left: 1px solid rgb(255,199,0);
				padding-bottom: 10px;
				position: relative;
			}
			.order-s h5{
				margin-bottom: 20px;
				font-size: 14px;
				color:rgb(255,199,0);
			}
			.order-s p{
				font-size:14px ;
				color:rgb(255,199,0);
			}
			.success{
				display: block;
				width: 26px;
				height: 26px;
				background: rgb(255,199,0);
				border-radius: 13px;
				text-align: center;
				line-height: 26px;
				color: white;
				font-size: 20px;
				position: absolute;
				left: -13px;
				top: -5px;
			}
			.order-e{
				margin-left: 10%;
				padding-left:25px;
				border-left: 1px solid white;
				padding-bottom: 10px;
				position: relative;
			}
			.order-e h5{
				margin-bottom: 20px;
				font-size: 14px;
			}
			.order-e p{
				font-size:14px ;
			}
			.none{
				display: block;
				width: 26px;
				height: 26px;
				background: white;
				border-radius: 13px;
				text-align: center;
				line-height: 26px;
				color: white;
				font-size: 20px;
				position: absolute;
				left: -13px;
				top: -5px;
			}
			.order-b{
				margin-left: 10%;
				padding-left:25px;
				border-left: 1px solid white;
				position: relative;
			}
			
			.home_top {
			    padding-top: 5px;
			}
			
			.home_top {
			    z-index: 100000;
			    height: 50px;
			    background-color: #3a3f43;
			    box-shadow: none;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<header class="mui-bar mui-bar-nav home_top">
			<h1 class="mui-title">卖出订单详情</h1>
		</header> 
		<div class="mui-content order_detail">
			<ul class="mui-table-view">
				<div class="detail_top">
					<span>卖出</span>
					<p>2018-04-26&nbsp;12:12:12</p>
				</div>
				<li class="mui-table-view-cell">
					<div>
						<img class="mui-media-object mui-pull-left" src="../../img/logo.png">
						<div class="mui-media-body">
							<p>卡卡</p>
							<div class="credit">信任：<span>80%</span></div>
						</div>
					</div>
					<div class="number_right mui-ellipsis">
						<span class="transaction_num">交易金额:1000</span>
						<span style="overflow: hidden;font-size:11px;">实付金额：850.00RMB</span>
						<span class="button mui-pull-right" id="confirm" type="button">联系他</span>
					</div>
				</li>
			</ul>
			<!--详情步骤-->
			<div class="orderlist">
				<div class="order-s">
					<h5 lang>你创建了中国区卖出订单</h5>
					<p><span lang>收款人：</span>肖智凯</p>
					<p><span lang>收款银行：</span>123456</p>
					<p><span lang>收款账号：</span>123456</p>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<div class="order-s">
					<h5><span lang>卖出用户</span>肖智凯<span lang>余额</span></h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
					<div class="order-s">
					<h5><span lang>你成功匹配了</span> 肖智凯 <span lang>为打款人</span></h5>
					<p><span lang>打款人：</span>肖智凯</p>
					<p><span lang>打款银行：</span>123</p>
					<p><span lang>打款账号：</span>123</p>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				  </div>
				<div class="order-s">
					<h5 lang>打款人已经向您线下打款</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<div class="order-s">
					<h5 lang>打款人已经确认打款</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<div class="order-e">
					<h5 lang>等待您确认收款</h5>
					<a class="none"></a>
				</div>
				<div class="order-e" style="border-left: none;">
					<h5 lang>卖出成功</h5>
					<a class="none"></a>
				</div>
			</div>
			<!--
            	<div class="orderlist">
				<div class="order-s">
					<h5 lang>你创建了中国区卖出订单</h5>
					<p><span lang>收款人：</span><%=(bank_account)%></p> 
					<p><span lang>收款银行：</span><%=(bank_name)%></p>
					<p><span lang>收款账号：</span><%=(bank_card)%></p>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<div class="order-s">
					<h5><span lang>卖出用户</span><%=(trade_money)%><span lang>余额</span></h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				
				<% if(status==1) { %>
				<div class="order-e">
					<h5 lang>等待匹配买入用户</h5>
					<a class="none"></a>
				</div>
				<% } else if(status>1 && status!=9) { %>
					<div class="order-s">
					<h5><span lang>你成功匹配了</span> <%=(buy_bank_account)%> 】<span lang>为打款人</span></h5>
					<p><span lang>打款人：</span><%=(buy_bank_account)%></p>
					<p><span lang>打款银行：</span><%=(buy_bank_name)%></p>
					<p><span lang>打款账号：</span><%=(buy_bank_card)%></p>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				    </div>
				<% }%>
				
				<% if(status<=2) { %>
				<div class="order-e">
					<h5 lang>等待打款人向您线下打款</h5>
					<a class="none"></a>
				</div>
				<% } else if(status>2 && status!=9) { %>
				<div class="order-s">
					<h5 lang>打款人已经向您线下打款</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<% }%>
				
				<% if(status<=2) { %>
				<div class="order-e">
					<h5 lang>等待打款人确认打款</h5>
					<a class="none"></a>
				</div>
				<% } else if(status>2 && status!=9) { %>
				<div class="order-s">
					<h5 lang>打款人已经确认打款</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<% }%>
				
				<% if(status<=3) { %>
				<div class="order-e">
					<h5 lang>等待您确认收款</h5>
					<a class="none"></a>
				</div>
				<% } else if(status>3 && status!=9) { %>
				<div class="order-s">
					<h5 lang>您已经确认收款</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<% }%>
				
				<% if(status==4) { %>
				<div class="order-s" style="border-left: none;">
					<h5 lang>卖出成功</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<% } else { %>
				<div class="order-e" style="border-left: none;">
					<h5 lang>卖出成功</h5>
					<a class="none"></a>
				</div>
				<% }%>
				
				<% if(status==9) { %>
				<div class="order-s" style="border-left: none;">
					<h5 lang>该笔交易已撤销</h5>
					<a class="success"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
				</div>
				<% }%>
			</div>
            -->
		</div>
	</body>

</html>